<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card header="设备分布图" style="font-weight: bold;">
          <div id="echarts1" style="width: 600px; height: 800px">
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="设备分布统计" style="font-weight: bold;">
          <div id="echarts2" style="width: 600px; height: 350px " >
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="设备销售统计" style="font-weight: bold;">
          <div id="echarts3" style="width: 600px; height: 350px">
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';

export default {
  name: "overview",
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    //地图部分
    //
    var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
    //取得json的样式，读取json文件
    $.getJSON("static/530000_full.json", "", function(data) {
      markdata=convertData(data.features)
      //生成地图
      createMap(data);
    })
    //生成地图
    function createMap(data){
      echarts.registerMap('demo',data);
      var myChart1 = echarts.init(document.getElementById("echarts1"));
      myChart1.setOption({
        dataRange: {
          min: 0,//颜色区间的最小值
          max: 50,//颜色区间的最大值，和data中的最大值一致
          x: 'left',
          y: 'bottom',
          text:['',''], // 文本，默认为数值文本
          calculable : true,
          inRange: {
            //颜色区间
            color: ['lightskyblue','yellow', 'orangered','red']
          }
        },
        tooltip : {
          show:true,
          formatter: '设备数量<br /> {b}: {c0}'
        },
        series: [{
          type: 'map',
          map: 'demo',
          itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
          },
          data:markdata,
          markPoint:{
            symbolSize: 45,
            itemStyle: {
              normal: {
                borderColor: '#33CBFF',
                color:'#33CBFF',
                borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                label: {
                  show: true
                }
              }
            },

            data:markdata

          }
        }]
      });
    }
    //处理整合   气泡图标数据
    function convertData(arrs){
      var markdata=[];
      var valuess=[18,20,0,30,15,25,38,10,5,38,16,27,43,32,15,17];
      for(var i=0; i<arrs.length; i++){
        markdata.push({})
        if(arrs[i].properties.name=='安次区'){
          markdata[i].coord=new Array(parseFloat(arrs[i].properties.center[0])+0.1,parseFloat(arrs[i].properties.center[1])-0.18);
          console.log(markdata[i])
        }else{
          markdata[i].coord=arrs[i].properties.center;
        }
        markdata[i].name=arrs[i].properties.name;

        markdata[i].value=valuess[i]
      }
      return markdata
    };
    //
    //end 地图部分

    var myChart2 = echarts.init(document.getElementById("echarts2"));
    var myChart3 = echarts.init(document.getElementById("echarts3"));

    var option2 = {
      backgroundColor: '',
      legend: {
        top: 20,
        textStyle: {
          color: 'black',
        },
        data: ['正常设备数', '异常设备数', '设备总数']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '12%'
      },
      xAxis: [{
        type: 'category',
        data: ['昆明', '宣威', '大理', '丽江'],
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        },
        axisLabel: {
          margin: 10,
          color: 'black',
          textStyle: {
            fontSize: 14
          },
        },
      }],
      yAxis: [{
        axisLabel: {
          formatter: '{value}',
          color: 'black',
        },
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        }
      }],
      series: [
        {
          name:"正常设备数",
          type: 'bar',
          data: [10, 8, 6, 8],
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "green"// 0% 处的颜色
              }, {
                offset: 1,
                color: 'green' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'black',
              shadowBlur: 4,
            }
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 50,
              height: 30,
              backgroundColor: 'rgba(0,160,221,0.1)',
              borderRadius: 200,
              position: ['-8', '-60'],
              distance: 1,
              formatter: [
                '    {d|●}',
                ' {a|{c}}     \n',
                '    {b|}'
              ].join(''),
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: 'black',
                  align: 'center',
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: '#234e6c',
                  align: 'left'
                },
              }
            }
          }
        },
        {
        name:"异常设备数",
        type: 'bar',
        data: [1, 0, 2, 2],
        barWidth: '20px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'red' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'red' // 100% 处的颜色
            }], false),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4,
          }
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 50,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: [
              '    {d|●}',
              ' {a|{c}}     \n',
              '    {b|}'
            ].join(''),
            rich: {
              d: {
                color: '#3CDDCF',
              },
              a: {
                color: 'black',
                align: 'center',
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left'
              },
            }
          }
        }
      },
        {
          name:"设备总数",
          type: 'bar',
          data: [11, 8, 8, 10],
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
              }], false),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4,
            }
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 50,
              height: 30,
              backgroundColor: 'rgba(0,160,221,0.1)',
              borderRadius: 200,
              position: ['-8', '-60'],
              distance: 1,
              formatter: [
                '    {d|●}',
                ' {a|{c}}     \n',
                '    {b|}'
              ].join(''),
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: 'black',
                  align: 'center',
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: '#234e6c',
                  align: 'left'
                },
              }
            }
          }
        }
      ]
    };
    var option3 = {
      backgroundColor: '#fff',
      title: {
        text: "销售量（个）",
        left: "18px",
        top: "0",
        textStyle: {
          color: "#999",
          fontSize: 12,
          fontWeight: '400'
        }
      },
      color: ['#73A0FA', '#73DEB3', '#FFB761','red'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          },
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      grid: {
        left: '25',
        right: '25',
        bottom: '24',
        top: '75',
        containLabel: true
      },
      legend: {
        data: ['昆明', '宣威', '丽江','大理'],
        orient: 'horizontal',
        icon: "rect",
        show: true,
        left: 20,
        top: 25,
      },
      xAxis: {
        type: 'category',
        data: ['一月份', '二月份', '三月份', '四月份', '五月份'],
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
      },
      yAxis: {
        type: 'value',
        // max: max_value>=100? max_value + 100: max_value+10,
        // max: max_value > 100 ? max_value * 2 : max_value + 10,
        // interval: 10,
        // nameLocation: "center",
        axisLabel: {
          color: '#999',
          textStyle: {
            fontSize: 12
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F3F4F4'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
      },
      series: [{
        name: '昆明',
        type: 'line',
        smooth: true,
        data: [6,1,4,3,7]
      },
        {
          name: '宣威',
          type: 'line',
          smooth: true,
          data: [2,6,3,5,8]
        },
        {
          name: '丽江',
          type: 'line',
          smooth: true,
          data: [1,5,2,7,4]
        },
        {
          name: '大理',
          type: 'line',
          smooth: true,
          data: [4,6,3,2,5]
        }
      ]
    };

    myChart2.setOption(option2);
    myChart3.setOption(option3);

  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
